<template>
  <div class='addForm'>
    <el-form ref="addDialog" :model="addDialog" :rules="rules" size="small" >
      <el-form-item label="所属学科" prop="subjectId">
        <el-select
          v-model="addDialog.subjectId"
          @change='optionChange'
          placeholder="请选择"
          style="width:112%">
          <el-option
            v-for="(item,index) in subjectList"
            :key="index"
            :label="item.subjectName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- prop与v-model中绑定的名字一样表单验证才奏效 -->
      <el-form-item label="标签名称" prop="tagName" >
        <el-input v-model="addDialog.tagName" placeholder="请输入目录名称" style="width:120%"></el-input>
      </el-form-item>
      <el-form-item style="margin:30px 2px 0 166px">
        <el-button @click="$emit('close')" v-if="cIsShowCancel">取 消</el-button>
        <el-button type="primary" @click="hAddorUpdate">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入接口
import { detail, update, add } from '@/api/hmmm/tags.js'
import { list } from '@/api/hmmm/subjects.js'

export default {
  name: 'addTag',
  props: ['tagId'],
  data () {
    return {
      // 对话框
      addDialog: {
        subjectId: null,
        tagName: null
      },
      subjectList: [], // 获取的学科列表数据
      rules: { // 验证规则
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        subjectId: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    console.log(this.tagId)
    // 父组件是否传了id,传了为编辑,没传为添加
    if (this.tagId) {
      this.doSubject()
      this.doLoading()
    } else {
      this.doSubject()
    }
  },
  computed: {
    cIsShowCancel () {
      return !!this.$listeners.close
    }
  },
  methods: {
    // 获取学科列表
    async doSubject () {
      try {
        const { data: res } = await list()
        console.log(res)
        this.subjectList = res.items
      } catch (err) {
        console.log(err)
      }
    },
    // 改变下拉框显示
    optionChange () {
      this.$forceUpdate()
    },
    // 有id时,获取数据回填
    async doLoading () {
      const { tagId } = this // this相当于this.tagId
      if (!tagId) {
        return
      }
      this.addDialog.id = tagId
      try {
        const { data: res } = await detail({ id: tagId })
        // console.log(res)
        // 数据回填
        this.addDialog.subjectId = res.subjectID
        this.addDialog.tagName = res.tagName
      } catch (err) {
        console.log(err)
      }
    },
    // 组装数据
    buildData () {
      const { tagId } = this // this相当于this.tagId
      const { subjectId, tagName } = this.addDialog
      const data = {
        id: tagId,
        subjectID: subjectId,
        tagName
      }
      return data
    },
    // 编辑修改
    async doEdit () {
      const data = this.buildData()
      console.log(data)
      try {
        const { data: res } = await update(data)
        console.log(res)
        this.$message.success('修改成功')
        this.emit()
      } catch (err) {
        console.log(err)
        this.$message.error('修改失败')
      }
    },
    // 添加
    async doAdd () {
      const data = this.buildData()
      try {
        const { data: res } = await add(data)
        console.log(res)
        this.emit()
        this.$message.success('添加成功')
      } catch (err) {
        console.log(err)
      }
    },

    // 告诉父组件完成了
    emit () {
      // this.$listeners 会自动收集所有加在这个组件上的事件监听
      this.$listeners.close && this.$emit('close')
      this.$listeners.refresh && this.$emit('refresh')
    },

    // 提交表单
    hAddorUpdate () {
      this.$refs.addDialog.validate(valid => {
        // 趁早返回
        if (!valid) {
          this.$message.error('带*号为必填项!')
          return
        }
        this.tagId ? this.doEdit() : this.doAdd()
      })
    }
  }
}
</script>

<style scoped lang='scss'></style>
